<template>
	<view>
		
		<fui-nav-bar isOccupy isFixed background="#0052D9" title="备件详情" color="#fff" @leftClick="leftClick">
		  <fui-icon color="#fff" name="arrowleft"></fui-icon>
			<template v-if="current==0" v-slot:right>
				<u-icon name="trash-fill" color="#fff" size="45rpx"></u-icon>
			</template>
		</fui-nav-bar>
		
		<view class="" style="background-color: #fff;padding: 20rpx 0;">
			<u-subsection :list="list" :current="current" activeColor="#0052d9" inactiveColor="#0052d9" mode="subsection" bgColor="#0052d9"  @change="sectionChange"></u-subsection>
		</view>
			
		<scroll-view scroll-y="true" style="height: 100vh;padding-bottom: 320rpx;">
			<view v-if="current==0" class="warp">
			  <view class="nav">
			    <view class="port">
			      <view class="title">
			        <fui-section :padding="['0', '20rpx']" title="备件信息" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
			      </view>
			      <view class="li">
			        <view class="left">备件编码</view>
			        <view class="right">SB005</view>
			      </view>
			      <view class="li">
			        <view class="left">备件名称</view>
			        <view class="right">XH0232</view>
			      </view>
			      <view class="li">
			        <view class="left">规格型号</view>
			        <view class="right">30*50*1</view>
			      </view>
			      <view class="li">
			        <view class="left">备件类型</view>
			        <view class="right">主要设备</view>
			      </view>
			      <view class="li">
			        <view class="left">备件单位</view>
			        <view class="right">个</view>
			      </view>
						<view class="li">
						  <view class="left">生产厂商</view>
						  <view class="right">天堂电器厂</view>
						</view>
						<view class="li">
						  <view class="left">备注</view>
						  <view class="right"></view>
						</view>
			    </view>
			  </view>
				<view class="nav warp">
					<view class="port">
						<view class="title">
							<fui-section :padding="['0', '20rpx']" title="备件库存" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
						</view>
						<view class="li">
							<view class="left">库存上限</view>
							<view class="right">1000</view>
						</view>
						<view class="li">
							<view class="left">库存下限</view>
							<view class="right">20</view>
						</view>
						<view class="li">
							<view class="left">总库存</view>
							<view class="right">800</view>
						</view>
						<view class="li">
							<view class="left">库存金额</view>
							<view class="right">6620</view>
						</view>
						<view class="li">
							<view class="left">更换周期</view>
							<view class="right">1月</view>
						</view>
					</view>
				</view>
				
				<view class="nav warp">
					<view class="port">
						<view class="title">
							<fui-section title="备件图片" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
						</view>
						<div class="grid-container">
							<div class="grid-item" v-for="v of 7">
								<image class="img" src="../../static/images/my/background-Img.png" mode=""></image>
							</div>
						</div>
					</view>
				</view>
				
				<view class="nav warp">
					<view class="port">
						<view class="title">
							<fui-section title="关联文档" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
						</view>
					
						<view class="document">
							<view class="debris" v-for="v of 4">
								<image class="img" src="/static/images/my/my-Profile.png" mode=""></image>
								<view class="">文档.pdf</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="current==1" class="">
				<view class="table-container">  
					<view class="table-header">  
						<view class="table-cell">序号</view>  
						<view class="table-cell">仓库名称</view>  
						<view class="table-cell">库存</view>  
						<view class="table-cell">存放位置</view>
					</view>  
					<view class="table-body" scroll-y="true">  
						<view class="table-row" v-for="(item, index) in list1" :key="index">  
							<view class="table-cell">{{ item.id }}</view>  
							<view class="table-cell">{{ item.name }}</view>  
							<view class="table-cell">{{ item.count }}</view>  
							<view class="table-cell">{{ item.code }}</view>
						</view>  
					</view>  
				</view>  
			</view>
			
		</scroll-view>
		
		<view v-if="current==0"  class="footer" @click="clickBtn">
		  <view class="recall">编辑</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue';
let current = ref(0)
let list = reactive(['备件信息', '库存明细'])
let list1 = reactive([
	{ id: 1, name: '仓库一', count: 225,code:'WZ015455' },  
	{ id: 2, name: '仓库一', count: 310,code:'WZ015df55' },  
	{ id: 3, name: '仓库一五', count: 325,code:'WZ0we5455' },
	{ id: 4, name: '仓库一五', count: 135 ,code:'Wwe15455'},
	{ id: 5, name: '仓库五', count: 335 ,code:'Wse5455'}
])
const leftClick = () => {
	uni.navigateBack()
}

const sectionChange = (e) => {
	current.value = e
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
  background-color: #f6f6f6;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.colorGray {
  color: #cbb8b8 !important;
}

.port {
	.document {
	  .debris {
	    display: flex;
	    align-items: center;
	    height: 100rpx;
	    .img {
	      width: 60rpx;
	      height: 60rpx;
	      margin: 0 30rpx;
	    }
	  }
	}
	.grid-container {
	  display: grid;
	  grid-template-columns: repeat(5, 1fr);
	  gap: 10px;
	  padding: 30rpx;
	}
	
	.grid-item {
	  // text-align: center;
	  // padding: 20px;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .img {
	    width: 100%;
	    border-radius: 50%;
	    height: auto;
	    aspect-ratio: 1/1; /* 指定宽高比为 1:1 */
	  }
	}
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    display: flex;
    align-items: center;
  }
  .li {
    padding: 20rpx;
    display: flex;
    align-items: center;
    height: 100rpx;
    // padding-left: 40rpx;
    .right {
      margin-left: 30rpx;
      color: #cbb8b8;
    }
  }
  .item {
    // height: 100rpx;
    padding-left: 40rpx;
    padding-bottom: 30rpx;
    .left {
      height: 70rpx;
    }
    .described {
      padding-right: 50rpx;
    }
  }
}

.statusType{
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	width: 200rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	border: 1rpx solid #0052d9;
	color: #0052d9;
}
.table-container {  
    width: 100%;  
    // border-collapse: collapse;  
		border: 1rpx solid #ccc;
		width: 94%;
		margin-left: 3%;
		background-color: #fff;
		margin-top: 20rpx;
		.table-header {  
		    display: flex;  
		    justify-content: space-between;  
		    align-items: center;  
		    padding: 10px 0;  
		    background-color: #f2f2f2;  
				.table-cell {  
				    flex: 1;  
				    text-align: center;  
				} 
		} 
		.table-body {  
		    width: 100%;  
		    padding: 10px 0; 
				 .table-row {
				     display: flex;  
				     justify-content: space-between;  
				     align-items: center;  
				     padding: 10px 0;  
				     border-bottom: 1px solid #ddd;  
						 .table-cell {  
						     flex: 1;  
						     text-align: center;  
						 } 
				 }
		}  
		  
		
}  
.warp {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
	margin-top: 20rpx;
  .nav {
    background-color: #fff;
		.port {
		  background-color: #fff;
		  margin-bottom: 20rpx;
		  .li {
		    display: flex;
		    align-items: center;
		    height: 100rpx;
		    padding-left: 40rpx;
		    .right {
		      margin-left: 30rpx;
		      color: #cbb8b8;
		    }
		  }
		  .item {
		    // height: 100rpx;
		    padding-left: 40rpx;
		    padding-bottom: 30rpx;
		    .left {
		      height: 70rpx;
		    }
		    .described {
		      padding-right: 50rpx;
		    }
		  }
		}
    .top {
      display: flex;

      .img {
        width: 180rpx;
        height: 190rpx;
      }
      .nav_title {
        // padding: 20rpx;
        padding-left: 20rpx;
        .h1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 60rpx;
          height: 60rpx;
        }
        .h2 {
          line-height: 44rpx;
        }
      }
    }
    .nav_bottom {
      margin-top: 10rpx;
      .nav_warp {
        padding: 10rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .scroll-view {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    padding-bottom: 170rpx;
  }
}
.footer {
  // position: fixed;
  // top: 50;
  // button: 20;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  border-top: 1px solid #ccc;
  height: 150rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .recall {
    background-color: #0052d9;
    width: 90%;
    border: 1px solid #0052d9;
    border-radius: 5rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #ffffff;
  }
	.recall2{
		width: 40%;
		border: 1px solid #ccc;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
	}
	.recall3{
		width: 40%;
		background-color: #0052d9;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
		color: #ffffff;
	}
}
</style>
